.notification-center {
  > .notification {
    padding: 9px 5px;
    color: $medium-gray;
    background: transparent;
    border: none;

    > .material-icons {
      font-size: 1.375rem;
      line-height: 1.375rem;
      vertical-align: middle;
    }

    > .count {
      @include notification_counter();

      &.hide {
        display: none;
      }
    }
  }

  > .notification::after {
    display: none;
  }

  .dropdown-menu {
    min-width: 25rem;
    padding: 0;
    margin: 0;
    @include border-radius(0);
  }

  .notifications {
    top: 42px;
    right: 5px;
    min-width: 25rem;
    padding: 0;
    margin: 0;
    font-size: $font-size-base;
    @include border-radius(0);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1);
    &::before,
    &::after {
      position: absolute;
      right: 9px;
      bottom: 100%;
      width: 0;
      height: 0;
      pointer-events: none;
      content: " ";
      border: solid transparent;
    }
    &::after {
      margin-right: 1px;
      border-color: transparent;
      border-width: 7px;
      border-bottom-color: #fff;
    }
    &::before {
      margin-left: -8px;
      border-color: transparent;
      border-width: 8px;
      border-bottom-color: #bbcdd2;
    }

    .nav {
      .nav-item {
        width: 33%;
        margin-left: 0;
        text-align: center;
      }

      .nav-link {
        padding: .9375rem .9375rem .625rem;
        font-weight: $font-weight-normal;
        color: $gray-medium;

        &.active {
          color: $gray-dark;
          border-top: 0;
          border-bottom: 2px solid $nav-tabs-active-link-hover-border-color;
        }

        &:hover {
          color: $link-color;
        }
      }
    }

    .tab-content {
      padding: 0;
      margin-top: -.0625rem;
      border-top: .125rem solid $gray-light;

      > .tab-pane {
        height: 11.88rem;
        overflow-y: auto;

        .no-notification {
          display: none;
        }

        &.empty {
          color: $gray-medium;
          text-align: center;

          &::after {
            font-family: "Material Icons", Arial, Helvetica, sans-serif;
            font-size: 5.625rem;
            color: $gray-light;
            content: "\E7F5";
            opacity: .7;
          }

          > .no-notification {
            position: absolute;
            bottom: 0;
            display: block;
            width: 100%;
            .mobile & {
              bottom: 3.125rem;
            }
          }
        }
      }

      .notif {
        display: block;
        padding: .625rem .9375rem;
        color: $gray-medium;

        .material-icons {
          vertical-align: top;
        }

        .message-notification-status {
          &.open {
            color: $brand-success;
          }

          &.closed {
            color: $brand-danger;
          }

          &.pending1,
          &.pending2 {
            color: $brand-secondary;
          }
        }

        strong {
          color: $gray-dark;
        }

        &:hover {
          color: $dropdown-link-hover-color;
          text-decoration: none;
          background-color: $dropdown-link-hover-bg;

          strong {
            color: $dropdown-link-hover-color;
          }
        }
      }
    }
  }
  .mobile & {
    .nav-link::before {
      display: block;
      font-family: "Material Icons", Arial, Helvetica, sans-serif;
      font-size: 30px;
      color: $gray-dark;
    }
    #orders-tab::before {
      content: "\E8CB";
    }
    #customers-tab::before {
      content: "\E7FE";
    }
    #messages-tab::before {
      content: "\E0BE";
    }
    .no-notification {
      top: 13.75rem;
    }
  }
}
